<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/pages/admin_include/head.html"/>
    <link href="${basePath!}/pages/admin/assets/fileUpload/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="${basePath!}/pages/admin/assets/fileUpload/css/fileUpload.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="${basePath!}/pages/admin/assets/fileUpload/js/fileUpload.js"></script>
</head>

<body data-type="widgets">
<script src="pages/admin/assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <#include "/pages/admin_include/header.html"/>
    <!-- 风格切换 -->
    <#include "/pages/admin_include/theme.html"/>
    <!-- 侧边导航栏 -->
    <#include "/pages/admin_include/menu.html"/>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">

            <div class="row">

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">上传图片</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body am-fr">

                            <div id="fileUploadContent" class="fileUploadContent"></div>
                            <button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-modal="{target: '#my-modal-loading'}">提交</button>
                            <a href="${basePath!}/admin/column"  class="am-btn am-btn-primary">返回列表</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- footer_js -->
<#include "/pages/admin_include/footer_js.html"/>
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">正在载入...</div>
        <div class="am-modal-bd">
            <span class="am-icon-spinner am-icon-spin"></span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-alert" tabindex="-2" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">提示</div>
        <div class="am-modal-bd">
            上传成功！
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn">确定</span>
        </div>
    </div>
</div>
</body>

</html>
<script type="text/javascript">
    $("#fileUploadContent").initUpload({
        "uploadUrl":"${basePath!}/admin/column/saveImg?id=${id!}",//上传文件信息地址
        //"size":350,//文件大小限制，单位kb,默认不限制
        //"maxFileNumber":3,//文件个数限制，为整数
        //"filelSavePath":"",//文件上传地址，后台设置的根目录
        "beforeUpload":beforeUploadFun,//在上传前执行的函数
        "onUpload":onUploadFun,//在上传后执行的函数
        //autoCommit:true,//文件是否自动上传
        "fileType":['png','jpg','docx','doc']//文件类型限制，默认不限制，注意写的是文件后缀

    });
    function beforeUploadFun(opt){
        //opt.otherData =[{"id":""}];
    }
    function onUploadFun(opt,data){
        var da = eval("("+data+")");
        $("#my-modal-loading").modal("close");
        $(".am-modal-alert").modal();
        if(da.success){
            uploadTools.uploadSuccess(opt);//显示上传成功
        } else {
            uploadTools.uploadError(opt);//显示上传错误
        }
        $('.btn-loading-example').button('reset');
    }


    function testUpload(){
        var opt = uploadTools.getOpt("fileUploadContent");
        uploadEvent.uploadFileEvent(opt);
    }

    //文件上传
    $('.btn-loading-example').click(function () {
        var $btn = $(this)
        $btn.button('loading');
        testUpload();
//        setTimeout(function(){
//            $btn.button('reset');
//        }, 5000);
    });
</script>